<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市选择</title>
    <style>
        .city-buttons button {
            background-color: #98FB98;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }

        .operation-buttons button {
            margin-bottom: 10px;
            width: 300px;
        }
    </style>
</head>
<body>

<div id="city" style="border: 1px solid #ccc; padding: 20px; width: 320px;">
    <p>你喜欢哪个城市？</p>
    <div class="city-buttons">
        <button id="bj">北京</button>
        <button>上海</button>
        <button>东京</button>
        <button>首尔</button>
    </div>
</div>

<div class="operation-buttons" style="margin-left: 400px;">
    <button onclick="createGuangzhou()">创建一个"广州"节点，添加到#city下</button>
    <br><br>
    <button onclick="insertBeforeGuangzhou()">将"广州"节点插入到#bj前面</button>
    <br><br>
    <button onclick="replaceBeijingWithGuangzhou()">使用"广州"节点替换#bj节点</button>
    <br><br>
    <button onclick="deleteBeijing()">删除#bj节点</button>
    <br><br>
    <button onclick="readCityHTML()">读取#city内的HTML代码</button>
    <br><br>
    <button onclick="setBeijingHTML()">设置#bj内的HTML代码</button>
</div>

<script>
    /**
     * createElement():创建一个元素节点
     * createTextNode():创建一个文本节点
     * appendChild():添加一个子节点,参数1：添加的节点
     * insertBefore():在指定节点的前面插入一个节点，参数1：要插入的节点，参数2：参考节点
     *      -语法：父节点.insetBefore(newNode, referenceNode);
     *      -parentNode.insertBefore(newNode, referenceNode);
     */
    function createGuangzhou() {
        const newCity = document.createElement('button');
        // newCity.textContent = '广州';
        newCity.innerHTML = '广州';
        document.querySelector('#city .city-buttons').appendChild(newCity);
    }


    /**
     * 在北京前面插入广州
     * 方式一：
     */
    function insertBeforeGuangzhou() {
        //创建广州
        var btn = document.createElement('button')
        var guangzhou = document.createTextNode('广州')
        btn.appendChild(guangzhou)
        //获取北京节点
        var beijing = document.getElementById('bj');
        beijing.parentNode.insertBefore(btn, beijing)
    }

    /**
     * 在北京前面插入广州
     * 方式二：
     */
    // function insertBeforeGuangzhou() {
    //     const bjNode = document.querySelector('#bj');
    //     const newCity = document.createElement('button');
    //     newCity.textContent = '广州';
    //     bjNode.parentNode.insertBefore(newCity, bjNode);
    // }

    /**
     * 使用广州节点替换北京节点
     * 方式一：
     * replaceChild：替换指定节点
     *          - 语法：父节点.replaceChild(newNode, oldNode);
     */
    function replaceBeijingWithGuangzhou() {
        //创建广州
        var btn = document.createElement('button')
        var guangzhou = document.createTextNode('广州')
        btn.appendChild(guangzhou)
        //获取北京节点
        var beijing = document.getElementById('bj');
        beijing.parentNode.replaceChild(btn, beijing)
    }

    /**
     * 使用广州节点替换北京节点
     * 方式二：
     */
    // function replaceBeijingWithGuangzhou() {
    //     const bjNode = document.querySelector('#bj');
    //     const newCity = document.createElement('button');
    //     newCity.textContent = '广州';
    //     bjNode.parentNode.replaceChild(newCity, bjNode);
    // }

    /**
     * 删除北京节点
     */
    function deleteBeijing() {
        var beijing = document.getElementById('bj');
        beijing.parentNode.removeChild(beijing);
    }

    /**
     * 删除北京节点
     * querySelector: 选择器：获取元素
     */
    function deleteBeijing() {
        const bjNode = document.querySelector('#bj');
        if (bjNode) {
            bjNode.remove();
        }
    }

    /**
     * 读取城市HTML
     */
    function readCityHTML() {
        const cityHTML = document.querySelector('#city .city-buttons').innerHTML;
        alert(cityHTML);
    }

    /**
     * 设置北京HTML
     */
    function setBeijingHTML() {
        const bjNode = document.querySelector('#bj');
        if (bjNode) {
            bjNode.innerHTML = '新的内容';
        }
    }
</script>

</body>
</html>
